<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/facelets/templates/template.xhtml">
	<ui:define name="head">
		<script src="http://maps.google.com/maps/api/js?sensor=true"
			type="text/javascript"></script>

		<script type="text/javascript">
			var currentMarker = null;

			function handlePointClick(event) {
				if (currentMarker != null) {
					currentMarker.setMap(null);
					currentMarker = null;
				}

				if (currentMarker == null) {
					document.getElementById('lat').value = event.latLng.lat();
					document.getElementById('lng').value = event.latLng.lng();

					currentMarker = new google.maps.Marker({
						position : new google.maps.LatLng(event.latLng.lat(),
								event.latLng.lng())
					});

					map.addOverlay(currentMarker);
					dlg.show();
				}
			}

			function markerAddComplete() {
				var direccion = document.getElementById('direccion');
				currentMarker.setTitle(direccion.value);
				direccion.value = "";
				dlg.hide();
			}

			function limpiarMarcadores() {
				dlg.hide();
				currentMarker.setMap(null);
				currentMarker = null;
				return false;
			}
		</script>

	</ui:define>

	<ui:define name="menu">
		<ui:include src="MenuSocios.xhtml"></ui:include>
	</ui:define>

	<ui:define name="body">
		<h:form>
			<h:panelGrid width="100%">
				<p:fieldset
					legend="Registro de solicitud de dependientes">

					<p:accordionPanel id="acpDatosPersonales" multiple="true">

						<p:tab title="Datos personales" id="tabDatosPersonales">
							<h:panelGrid columns="4">
								<h:outputText value="Nombres (*)" />
								<p:spacer width="15" height="25" />
								<h:inputText style="width:500px"
									value="#{socioDependienteSolicitudAction.socioBean.nombres}" />
								<h:outputText value="" />

								<h:outputText value="Apellido Paterno (*)" />
								<p:spacer width="15" height="25" />
								<h:inputText style="width:500px"
									value="#{socioDependienteSolicitudAction.socioBean.apellidoPaterno}" />
								<h:outputText value="" />

								<h:outputText value="Apellido Materno (*)" />
								<p:spacer width="15" height="25" />
								<h:inputText style="width:500px"
									value="#{socioDependienteSolicitudAction.socioBean.apellidoMaterno}" />
								<h:outputText value="" />

								<h:outputText value="Tipo de Documento (*)" />
								<p:spacer width="15" height="25" />
								<p:selectOneMenu
									value="#{socioDependienteSolicitudAction.socioBean.tipoDocumento}"
									effect="fade">
									<f:selectItem itemValue="-1" itemLabel="-- Seleccione --" />
									<f:selectItems
										value="#{socioDependienteSolicitudAction.listaTipoDocumento}" />
								</p:selectOneMenu>
								<h:outputText value="" />

								<h:outputText value="Nro. Documento (*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:100px"
									value="#{socioDependienteSolicitudAction.socioBean.nroDocumento}" />
								<h:outputText value="" />
							</h:panelGrid>
						</p:tab>
						<p:tab title="Contacto" id="tabDatosContacto">
							<h:panelGrid columns="4">
								<h:outputText value="Tel&eacute;fono(*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:120px"
									value="#{socioRegistroAction.socioBean.telefono}" />
								<h:outputText value="" />

								<h:outputText value="Celular(*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:120px"
									value="#{socioRegistroAction.socioBean.celular}" />
								<h:outputText value="" />

								<h:outputText value="Correo (*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:120px"
									value="#{socioRegistroAction.socioBean.email}" />
								<h:outputText value="" />
							</h:panelGrid>
						</p:tab>
						<p:tab title="Ubicaci&oacute;n" id="tabDatosUbicacion">
							<h:form>
								<h:panelGrid columns="4">

									<h:outputText value="Dirección (*)" />
									<p:spacer width="15" height="25" />
									<p:gmap id="gmap"
										center="#{socioDependienteSolicitudAction.geoCenter}" zoom="8"
										type="HYBRID" style="width:600px;height:400px"
										model="#{socioDependienteSolicitudAction.emptyModel}"
										onPointClick="handlePointClick(event)" widgetVar="map"
										streetView="true" disableDoubleClickZoom="true" />
									<p:spacer />

									<h:outputText value="Departamento (*)" />
									<p:spacer width="15" height="25" />
									<p:selectOneMenu
										value="#{socioDependienteSolicitudAction.socioBean.departamento}"
										effect="fade">
										<f:selectItem itemValue="-1" itemLabel="-- Seleccione --" />
										<f:selectItems
											value="#{socioDependienteSolicitudAction.listaDepartamentoBean}"
											var="dep" itemLabel="#{dep.nombre}" itemValue="#{dep.id}" />
										<p:ajax event="change" update="gmap"
											listener="#{socioDependienteSolicitudAction.updateMapCenter}" />
									</p:selectOneMenu>
									<h:outputText value="" />

									<h:outputText value="Provincia (*)" />
									<p:spacer width="15" height="25" />
									<p:selectOneMenu
										value="#{socioDependienteSolicitudAction.socioBean.provincia}">
										<f:selectItem itemValue="-1" itemLabel="-- Seleccione --" />
										<f:selectItems
											value="#{socioDependienteSolicitudAction.itemsProvincia}" />
									</p:selectOneMenu>
									<h:outputText value="" />

									<h:outputText value="Distrito (*)" />
									<p:spacer width="15" height="25" />
									<p:selectOneMenu
										value="#{socioDependienteSolicitudAction.socioBean.distrito}">
										<f:selectItem itemValue="-1" itemLabel="-- Seleccione --" />
										<f:selectItems
											value="#{socioDependienteSolicitudAction.itemsDistrito}" />
									</p:selectOneMenu>
									<h:outputText value="" />

								</h:panelGrid>
							</h:form>
						</p:tab>
					</p:accordionPanel>

					<div>
						<h:panelGrid id="pngMensajeGeneral">
							<h:outputText value="#{socioDependienteSolicitudAction.mensaje}" />
						</h:panelGrid>
					</div>
					<div>
						<p:commandButton value="Grabar"
							update="acpDatosPersonales, pngMensajeGeneral"
							action="#{socioDependienteSolicitudAction.validarGrabar}"
							oncomplete="limpiarMarcadores()" />
					</div>
				</p:fieldset>
			</h:panelGrid>
		</h:form>


		<p:growl showDetail="true" autoUpdate="true" />

		<p:dialog widgetVar="dlg" effect="FADE" close="false"
			fixedCenter="true" header="Direcci&oacute;n">
			<h:form prependId="false">
				<h:panelGrid columns="2">
					<p:inputText id="direccion"
						value="#{socioDependienteSolicitudAction.socioBean.direccion}" />

					<f:facet name="footer">
						<p:commandButton value="Agregar"
							actionListener="#{socioDependienteSolicitudAction.addMarker}"
							oncomplete="markerAddComplete()" />
						<p:commandButton value="Cancelar"
							onclick="return limpiarMarcadores()" />
					</f:facet>
				</h:panelGrid>

				<h:inputHidden id="lat"
					value="#{socioDependienteSolicitudAction.socioBean.latitud}" />
				<h:inputHidden id="lng"
					value="#{socioDependienteSolicitudAction.socioBean.longitud}" />
			</h:form>
		</p:dialog>

	</ui:define>
</ui:composition>
</html>